<template>
  <div>
    <div class="ss" ref="chart" style="width: 70%; height: 400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'CustomerCharts',
  data () {
    return {
      customerChannelData: [
        { value: 100, name: '线索' },
        { value: 70, name: '商机' },
        { value: 30, name: '客户' }
      ]
    }
  },
  mounted () {
    this.renderChart()
  },
  methods: {
    renderChart () {
      const chart = echarts.init(this.$refs.chart)
      chart.setOption({
        title: {
          text: '客户转化漏斗图'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['线索', '商机', '客户']
        },
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: this.customerChannelData
          }
        ]
      })
    }
  }
}
</script>
<style>
.ss{
  margin: 0 auto;
}
</style>
